<template>
  <section class="search-container">
    <NavHeader title="搜索" />
    <div class="search-content">
      <form class="search-form" @submit.prevent="handleSubmit">
        <div class="search-input-wrap">
          <input
            class="search-input"
            type="text"
            v-model.trim="keyword"
            placeholder="请输入店铺名称"
          />
          <i
            v-show="keyword.length"
            @click="handleClearKeyword"
            class="icon-cheng"
          ></i>
        </div>
        <button class="green-btn">搜索</button>
      </form>
      <div class="search-wrap" v-show="searchList.length">
        <div class="search-scroll">
          <ul class="search-list">
            <li
              class="search-item"
              v-for="searchItem in searchList"
              :key="searchItem.id"
            >
              <router-link
                class="search-router"
                :to="{
                  path: '/shop',
                  query: {
                    searchItem,
                  },
                }"
              >
                <img
                  class="search-img"
                  :src="imgBaseUrl + searchItem.image_path"
                  alt=""
                  style="width: 80px; height: 80px"
                />
                <div class="text-wrap">
                  <span>{{ searchItem.name }}</span>
                  <span>月售{{ searchItem.recent_order_num }}单</span>
                  <span
                    >{{ searchItem.float_delivery_fee }}元起送 / 距离{{
                      searchItem.distance
                    }}公里</span
                  >
                </div>
              </router-link>
            </li>
          </ul>
        </div>
      </div>
      <div v-show="isShowNoData">暂无数据</div>
    </div>
  </section>
</template>

<script>
import { mapState } from 'vuex'
import BScroll from 'better-scroll'
import NavHeader from '../../components/NavHeader'
export default {
  name: 'Search',
  components: { NavHeader },
  data () {
    return {
      imgBaseUrl: 'http://cangdu.org:8001/img/',
      keyword: '', // 搜索关键字
      isShowNoData: false, // 展示无数据的时候
      scroll: null // 滚动效果
    }
  },
  computed: {
    ...mapState(['searchList'])
  },
  mounted () {
    this._initScroll()
  },

  methods: {
    handleSubmit () {
      let { keyword } = this
      if (keyword) {
        this.isShowNoData = true
        this.$store.dispatch('loadingSearchList', keyword)
        this.isShowNoData = false
      }
    },
    handleClearKeyword () {
      this.keyword = ''
    },
    _initScroll () {
      this.$nextTick(() => {
        this.scroll = new BScroll('.search-scroll', {
          scrollY: true,
          click: true,
          pullUpLoad: true
        })
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../assets/common/stylus/mixins.styl'
.search-container
  width 100%
  height 100%
  background-color #fff
  overflow-y scroll
  .search-content
    padding-top 80px
    height 100%
    .search-form
      padding 10px
      width 100%
      display flex
      justify-content space-between
      .search-input-wrap
        border-1px($bc)
        width 65%
        height 30px
        line-height 30px
        display flex
        justify-content space-between
        .search-input
          width 90%
          height 30px
          padding 0 10px
      .green-btn
        width 30%
        height 30px
        background-color $green
        color #fff
        font-size 20px
    .search-wrap
      position relative
      .search-scroll
        position absolute
        left 0
        top 0
        overflow hidden
        .search-list
          height 700px
          display flex
          flex-direction column
          .search-item
            bottom-border-1px($bc)
            background-color #fff
            height 80px
            width 100%
            .search-router
              display flex
              align-items center
              .search-img
                width 60px
                height 60px
              .text-wrap
                color #333
                display flex
                flex-direction column
                span
                  padding 5px
</style>
